<!--
[{id: '', goodsId: '', name: ''}]
-->
<template>
    <el-dialog title="选择素材" :visible.sync="showGoodsPop" class="el-dialog-edit" :close-on-click-modal="false">
        <el-form label-position="left" label-width="120px" style="width: 100%; padding-left: 20px;">
            <el-form-item label="所选素材：" v-if="count !== 1">
                <div class="el-tag-box">
                    <el-tag v-for="(material, index) of materialCheck" :key="material.id" :closable="true" @close="delGoods(index)">{{material.name}}</el-tag>
                </div>
            </el-form-item>
        </el-form>
        <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left" label-width="120px" style="width: 100%">
            <input type="text" style="display: none"/><!--form input placeholder-->
            <el-row>
                <el-col :span="14">
                    <el-form-item label="上传时间：" prop="name">
                        <el-date-picker
                        v-model="rangeTime"
                        type="daterange"
                        range-separator="至"
                        value-format="yyyy-MM-dd"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="名称：" label-width="60px" prop="name">
                        <el-input v-model="listQuery.name" placeholder="请输入素材名称" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <!-- <el-col :span="12">
                    <el-form-item label="类型:" prop="type">
                        <el-select v-model="listQuery.type" clearable @change="getList">
                            <el-option  label="图文" :value="1"></el-option>
                            <el-option  label="图片" :value="2"></el-option>
                            <el-option  label="视频" :value="3"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col> -->
                <el-col :span="12">
                    <el-form-item label="">
                        <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- <el-row :gutter="50">
                <el-col :xs="24">
                    <el-form-item label="素材名称:" prop="name">
                        <el-input @keyup.enter.native="search" v-model="listQuery.name" placeholder="按箱起活动名称搜索" maxlength="50" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row> -->
        </el-form>
        <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border @row-click="clickRow">
            <el-table-column align="center" width="50">
                <template slot-scope="scope">
                    <label class="input-radio" v-if="count === 1">
                        <input type="radio"  :value="{id: scope.row.id, name: scope.row.name, type: scope.row.type, content: scope.row.content, resource: scope.row.resource}" v-model="materialRadio"/>
                        <span></span>
                    </label>
                    <label class="input-checkbox" v-else>
                        <input type="checkbox"  :value="{id: scope.row.id, name: scope.row.name, type: scope.row.type, content: scope.row.content, resource: scope.row.resource}" v-model="materialCheck"/>
                        <span></span>
                    </label>
                </template>
            </el-table-column>
            <el-table-column align="center" label="素材名称" prop="name"></el-table-column>
            <el-table-column align="center" label="素材分类" prop="type">
                <template slot-scope="scope">
                    <span v-if="scope.row.type===1">图文</span>
                    <span v-if="scope.row.type===2">图片</span>
                    <span v-if="scope.row.type===3">视频</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="上传时间" prop="createdAt"></el-table-column>
        </el-table>
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="listQuery.pageNum"
            :page-size="listQuery.pageSize"
            background
            layout="total, prev, pager, next, jumper"
            style="text-align: center"
            :total="listTotal">
        </el-pagination>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" :loading="btnDisabled" @click="chooseMaterial">确定</el-button>
            <el-button @click="close">取消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: 'materialLibrary',
        props: {
            check: {
                type: Array,
                default() {
                    return [];
                }
            },
            count: {
                type: Number,
                default: -1
            },
            materialType: {
                type: Number,
                default:''
            }
        },
        data() {
            return {
                list: [],
                listQuery: {
                    pageNum: 1,
                    pageSize: 10,
                    name:'',
                    type: this.materialType,
                    endTime:'',
                    startTime:''
                },
                rangeTime:[],
                showGoodsPop: true,
                materialCheck: this.check,
                materialRadio: {},
                listLoading: false,
                btnDisabled: false,
                listTotal: 0
            }
        },
        created() {
            this.getList();
            if (this.count === 1 && this.check.length > 0) {
                this.materialRadio = this.check[0]
            }
        },
        methods: {
            // 获取列表
            getList() {
                this.listLoading = true
                if(this.rangeTime){
                    if(this.rangeTime.length>0){
                        this.listQuery.startTime = this.rangeTime[0]
                        this.listQuery.endTime = this.rangeTime[1]
                    } else {
                        this.listQuery.startTime = ''
                        this.listQuery.endTime = ''
                    }
                }else {
                   this.listQuery.startTime = ''
                   this.listQuery.endTime = '' 
                }
                this.request({
                    url: '/bus-material-lib/search/detail',
                    method: 'post',
                    data: this.listQuery
                }).then((res) => {
                    this.list = res.data.list
                    this.listTotal = res.data.total
                    this.listLoading = false
                }).catch(err => {
                    console.log(err);
                    this.list = [];
                    this.listTotal = 0;
                    this.listLoading = false;
                });
                // this.request({
                //     url: '',
                //     method: 'get'
                // }).then(({data, totalCount}) => {
                //     this.list = data;
                //     this.listTotal = totalCount;
                //     this.listLoading = false;
                // }).catch(err => {
                //     this.list = [];
                //     this.listTotal = 0;
                //     this.listLoading = false;
                // });
            },
            // 单击行
            clickRow({id, name, content, resource, type}) {
                if (this.count === 1) {
                    this.materialRadio = {
                        id,
                        name,
                        content,
                        resource,
                        type
                    }
                    return false;
                }
                let index = this.materialCheck.findIndex(item => item.id === id);
                if (index < 0) {
                    this.materialCheck.push({
                        id,
                        name,
                        content,
                        resource,
                        type
                    });
                } else {
                    this.materialCheck.splice(index, 1);
                }
            },
            // 通过tag删除
            delGoods(index) {
                this.materialCheck.splice(index, 1);
            },
            // 选择素材
            chooseMaterial() {
                if(this.count === 1){
                    this.materialCheck = [this.materialRadio]
                }
                if(this.materialCheck.length < 1){
                    return this.$message.error('请选择商品');
                }
                if(this.count > 0 && this.materialCheck.length > this.count){
                    return this.$message.error(`最多选择${this.count}个商品`);
                }
                // console.log(this.materialCheck)
                this.$emit('choose', this.materialCheck);
                this.close();
            },
            // 关闭弹窗
            close() {
                this.showGoodsPop = false;
                document.body.removeChild(this.$el);
            },
            // 搜索
            search() {
                this.listQuery.pageNum = 1;
                this.getList();
            },
            // 切换分页
            handleCurrentChange(page) {
                this.listQuery.pageNum = page;
                this.getList();
            },
        }
    }
</script>
